<template>
  <div>
    <Input  style="margin-bottom: 10px" v-model="keyword" @on-search="searchData" @on-clear="clearInput" search enter-button placeholder="平台搜索" clearable class="input-container" />
    <Table border :columns="columns" :data="data"></Table>
    <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange"  :current="currentPage" :total="total" show-total />
  </div>
</template>
<script>
import axios from "axios";

export default {
  data () {
    return {
      currentPage: 1, // 当前页码
      total:0,
      data:[],
      keyword:'',
      columns: [
        {
          title: '平台名称',
          align: 'center',
          key: 'PlatformName',
          // 添加自定义渲染方法
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              // attrs: {
              //   href: '跳转链接地址'
              // },
              on: {
                click: () => {
                 let url = '/dashboard/projectlist/projectdetails?company='+params.row.CompanyId+'&tab=name1'
                  this.$router.push(url);
                }
              }
            }, params.row.PlatformName); // 显示平台名称
          }
        },
        {
          title:"主机数量",
          align: 'center',
          key:'HostsNum',
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              // attrs: {
              //   href: '跳转链接地址'
              // },
              on: {
                click: () => {
                  let url = '/dashboard/projectlist/projectdetails?company='+params.row.CompanyId+'&tab=name3'
                  this.$router.push(url);
                }
              }
            }, params.row.HostsNum);
          }
        },
        {
          title:"服务数量",
          align: 'center',
          key:'ServiceNum',
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              // attrs: {
              //   href: '跳转链接地址'
              // },
              on: {
                click: () => {
                  // 点击事件处理程序，执行跳转操作
                  // 可以根据需要进行页面跳转的具体逻辑实现
                  // 例如：使用 vue-router 进行页面跳转
                  let url = '/dashboard/projectlist/projectdetails?company='+params.row.CompanyId+'&tab=name2'
                  this.$router.push(url);
                }
              }
            }, params.row.ServiceNum); // 显示平台名称
          }
        },
        {
          title:"漏洞数量",
          align: 'center',
          key:'Vulnerability',
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              // attrs: {
              //   href: '跳转链接地址'
              // },
              on: {
                click: () => {
                  // 点击事件处理程序，执行跳转操作
                  // 可以根据需要进行页面跳转的具体逻辑实现
                  // 例如：使用 vue-router 进行页面跳转
                  let url = '/dashboard/projectlist/projectdetails?company='+params.row.CompanyId+'&tab=name4'
                  this.$router.push(url);
                }
              }
            }, params.row.Vulnerability); // 显示平台名称
          }
        },
        {
          title:"部署方式",
          align: 'center',
          key:'DeployStyle'
        },
      ],
    }
  },
  mounted() {
    this.getPlatformData();
  },
  methods:{
    getPlatformData() {
      axios.get(`http://172.30.53.223:8888/api/platformlist?page=${this.currentPage}&keyword=${this.keyword}`)
          .then(response => {
            if (response.data.platformlist === null) {
              this.data = [];
            } else {
              this.data = response.data.platformlist.map(platform => ({
                ID: platform.ID,
                CompanyId: platform.CompanyId,
                PlatformName: platform.PlatformName,
                HostsNum: platform.HostsNum,
                ServiceNum: platform.ServiceNum,
                Vulnerability:platform.Vulnerability,
                DeployStyle: platform.DeployStyle,
              }));
            }
            this.total = response.data.total;
          });
    },
    handlePageChange(currentPage){
      // 当页码变化时，更新currentPage并重新获取表格数据
      this.currentPage = currentPage;
      this.getPlatformData();
    },
    searchData() {
      this.currentPage=1
      this.getPlatformData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.getPlatformData();
    },
  }
}
</script>
